<route lang="json5" type="profile">
{
  style: {
    navigationBarTitleText: '我的',
    navigationBarBackgroundColor: '#018d71',
    navigationBarTextStyle: 'white',
  },
}
</route>

<template>
  <view class="profile-page">
    <!-- 个人信息 -->
    <view class="profile-header">
      <image :src="user.avatar" class="avatar" mode="aspectFill" />
      <view class="nickname">{{ user.nickname }}</view>
    </view>

    <!-- 订单状态 -->
    <view class="order-status-section">
      <view class="section-title">我的订单</view>
      <view class="order-status-list">
        <view
          class="order-status-item"
          v-for="item in orderStatusList"
          :key="item.key"
          @click="goToOrderList(item.key)"
        >
          <view class="status-icon">{{ item.icon }}</view>
          <view class="status-text">{{ item.text }}</view>
        </view>
      </view>
    </view>

    <!-- 地址管理 -->
    <view class="address-section">
      <view class="section-title">收货地址</view>
      <view class="address-info">
        <view class="address-detail">{{ address.detail }}</view>
        <wd-button size="small" type="primary" @click="editAddress">修改地址</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const user = ref({
  avatar: '/static/images/avatar.png',
  nickname: '菲鸽用户',
})

const orderStatusList = [
  { key: 'all', icon: '📦', text: '全部订单' },
  { key: 'pending', icon: '💰', text: '待支付' },
  { key: 'shipped', icon: '🚚', text: '待发货' },
  { key: 'delivered', icon: '📬', text: '待收货' },
  { key: 'completed', icon: '✅', text: '已完成' },
]

const address = ref({
  detail: '广东省广州市天河区高新技术产业开发区xxx路88号',
})

const goToOrderList = (status: string) => {
  uni.showToast({
    title: `查看${orderStatusList.find((i) => i.key === status)?.text}`,
    icon: 'none',
  })
}

const editAddress = () => {
  uni.showToast({
    title: '地址功能开发中',
    icon: 'none',
  })
}
</script>

<style lang="scss" scoped>
.profile-page {
  background: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 40px;
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 0 16px 0;
  background: linear-gradient(135deg, #018d71 60%, #00b894 100%);
  border-radius: 0 0 24px 24px;
  margin-bottom: 16px;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 2px 8px rgba(1, 141, 113, 0.1);
    margin-bottom: 12px;
    background: #fff;
  }
  .nickname {
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

.order-status-section {
  background: #fff;
  margin: 0 16px 16px 16px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }
  .order-status-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    .order-status-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0;
      border-radius: 8px;
      background: #f8f8f8;
      transition: all 0.2s;
      &:active {
        background: #e0f7ef;
        transform: scale(0.96);
      }
      .status-icon {
        font-size: 22px;
        margin-bottom: 4px;
      }
      .status-text {
        font-size: 12px;
        color: #333;
      }
    }
  }
}

.address-section {
  background: #fff;
  margin: 0 16px;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }
  .address-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .address-detail {
      font-size: 14px;
      color: #666;
      margin-right: 12px;
    }
  }
}
</style>
